<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 面向过程和面向对象

    // 面向过程：
    // 分析解决问题需要的步骤，然后通过变量和函数一一实现，使用时依次调用即可
    // (1) 购物车  (1. 获取元素 2. 加号事件 3.减号事件 4.全选/反选 5.单删和全删 6.合计)
    // (2) 元素拖拽(1. 获取元素 2. 当鼠标按下，确定按下的位置 3.鼠标在文档移动时,盒子跟随移动 4.鼠标抬起，停止移动)
    // (3) 日历

    // 面向对象:  {属性,方法}  大量的分工和紧密的协作
    // 思想上提升 , 就是将你的需求抽象成一个对象,然后针对这个对象分析其特征(属性)与行为(方法)--这个对象就称之为类(面向对象)

    // 你(A)和你的同桌(B)  => 小作坊遇到什么问题就解决什么问题
    //      公司升级扩招   => 企业模式 产品 UI 前端 后端 测试 财务 咨询 前台

    // 常见应用：
    // 1. 插件/组件/模块 封装 (轮播 日历 购物车 放大镜)
    // 2. 框架(一套完整的体系)


    // 面向对象的三大特征：
    // 封装  继承  多态



    // 把放到冰箱中需要几步？
    // 1. 打开冰箱
    // 2. 把大象放到冰箱中
    // 3. 关上冰箱

    // 面向过程：
    // var elephant = "大象";
    // var iceBox = "冰箱";
    // function open() {

    // }

    // function put(target) {

    // }

    // function close() {

    // }

    // 面向对象：
    // 思想上提升 , 就是将你的需求抽象成一个对象,然后针对这个对象分析其特征(属性)与行为(方法)--这个对象就称之为类(面向对象)
    // 也就是说 把构成问题的事务（事务：一般是指要做的或所做的事情），分解成各个对象，建立对象的目的是为了描述某个事物在整个解决问题的步骤中的行为
    // elephant = {
    //     name:"茅茅",
    //     age:2,
    //     weight:"200kg",
    // }
    // iceBox = {
    //     brand: "Midea", //属性
    //     volume: "80",
    //     open() { },  //方法
    //     put(target) { },
    //     close() { },
    // }

    // iceBox.open()
    // iceBox.put(elephant)
    // iceBox.close()

    // 最简单的面向对象: 字面量对象 (把面向过程中的变量和函数整合到一起作为对象的属性和方法) 


</script>

</html>